<template>
    <div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>优惠券类型</td>
                    <td>
                        <select v-model="add.discountType">
                            <option :value="1">代金券</option>
                            <option :value="2">折扣券</option>
                            <option :value="3">兑换券</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>优惠券标题</td>
                    <td>
                        <input type="text" v-model="add.title">
                    </td>
                </tr>
                <tr>
                    <td>副标题</td>
                    <td>
                        <input type="text" v-model="add.subTitle">
                    </td>
                </tr>
                <tr>
                    <td>图片</td>
                    <td>
                        <input type="file" @change="img">
                        <img :src="add.photo" alt="" width="100" height="100" v-if="add.photo!=''">
                    </td>
                </tr>
                <tr>
                    <td>库存</td>
                    <td>
                        <input type="text" v-model="add.count">
                    </td>
                </tr>
                <tr>
                    <td>限领数量</td>
                    <td>
                        <input type="text" v-model="add.personNumber" disabled>
                    </td>
                </tr>
                <tr>
                    <td>使用条件</td>
                    <td>
                        <input type="text" v-model="add.amountMoney">
                    </td>
                </tr>
                <tr v-if="add.discountType==1">
                    <td>减免金额</td>
                    <td>
                        <input type="text" v-model="add.subMoney" >
                    </td>
                </tr>
                <tr v-if="add.discountType==2">
                    <td>折扣价</td>
                    <td>
                        <input type="text" v-model="add.zheKou" >
                    </td>
                </tr>
                <tr>
                    <td>开始时间</td>
                    <td>
                        <input type="date" v-model="add.beginTime">
                    </td>
                </tr>
                <tr>
                    <td>结束时间</td>
                    <td>
                        <input type="date" v-model="add.endTime">
                    </td>
                </tr>
                <tr>
                    <td>适用业务</td>
                    <td>
                        <input type="checkbox" name="userService" value="商场购物" v-model="add.userService">商场购物
                        <input type="checkbox" name="userService" value="超市折扣" v-model="add.userService">超市折扣
                        <input type="checkbox" name="userService" value="衣服购物" v-model="add.userService">衣服购物
                    </td>
                </tr>
                <tr>
                    <td>使用须知</td>
                    <td>
                        <textarea cols="50" rows="5" v-model="add.useDesc"></textarea>
                    </td>
                </tr>
                <tr>
                    <td>门店地址</td>
                    <select v-model="add.shopId">
                        <option value="">请选择</option>
                        <option :value="item.id" v-for="item in xiala.list">{{item.name}}</option>
                    </select>
                </tr>
                <tr>
                    <td>服务手机号</td>
                    <td>
                        <input type="text" v-model="add.phone" maxlength="11">
                    </td>
                </tr>
                <tr>
                    <td>优惠券颜色</td>
                    <td>
                        <input type="color"  v-model="add.color">
                        
                     
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="添加" @click="adddis">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import {ref,reactive,onMounted} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import moment from 'moment';
const route=useRoute();
const router=useRouter();

onMounted(()=>{
    showaddr();
})


const add:any=reactive({
  
  "discountType": '',
  "title": "",
  "subTitle": "",
  "photo": "",
  "count": '',
  "personNumber": 1,
  "amountMoney": '',
  "subMoney": 0,
  "zheKou": 10,
  "beginTime": "",
  "endTime": "",
  "userService": [],
  "useDesc": "",
  "shopId": '',
  "phone": "",
  "color": '#ff0000',
 
})

const adddis=()=>{

    if(add.subMoney=="" && add.discountType==1){
        alert("减免金额不能为空");
        return;
    }
    if(add.zheKou=="" && add.discountType==2){
        alert("折扣不能为空");
        return;
    }
    if((add.zheKou<0||add.zheKou>=10 ) && add.discountType==2){
        alert("折扣只能是0-9.9折");
        return;
    }
    add.userService=add.userService.toString();
    axios({
        method:'post',
        url:'/api/Discount/DisCountAdd',
        data:add,
    })
    .then(res=>{
        console.log(res);
        if(res.data==-1){
            alert("标题不能重复");
            return;
        }
        if(res.data>0){
            alert("添加成功");
            router.push('/disShow');
            
        }
        else{
            alert("添加失败");
        }
    })
    .catch(err=>{
        console.log(err);
    })
}

const img=(e:any)=>{
    let obj=e.target.files[0];
    let f=new FormData();
    f.append('file',obj);
    axios({
        method:'post',
        url:'/api/UpFile/UpLoad',
        data:f
    })
    .then(res=>{
        console.log(res);
        add.photo=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}



const xiala:any=reactive({
    list:[],
})
const showaddr=()=>{
    axios({
        method:'get',
        url:'/api/Shop/ShopAddressShow',
      

    })
    .then(res=>{
        console.log(res);
        xiala.list=res.data;
    })
    .catch(err=>{
        console.log(err);
    })

}
</script>

<style scoped>

</style>